<template>
	<uni-popup ref="popupRef" :is-mask-click="false" type="bottom">
		<view class="iflex column fill privacy">
			<view class="iflex jcc fill privacy__title">用户隐私保护提示</view>
			<view class="privacy__content">
				感谢您使用《展会小程序》，使用此小程序应当阅读并同意
				<text @click="tapOpenPrivacyContract">《用户隐私保护协议》</text>。
			</view>
			<view class="privacy__content">当您点击同意时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力。</view>
			<view class="iflex jcc fill privacy__footer">
				<u-button id="disagree-button" size="submajor" shape="circle"
					@click="tapDisagreePricayAuthorization">拒绝</u-button>
				<u-button id="agree-button" type="primary" size="submajor" shape="circle"
					style="width:200rpx;margin-left: 60rpx;" :customStyle="{width:'100%'}"
					open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="tapAgreePricayAuthorization">同意</u-button>
			</view>
		</view>
	</uni-popup>
</template>
<script lang="ts">
	// #ifdef MP-WEIXIN
	import { defineComponent } from "vue"
	export default defineComponent({
		options: {
			virtualHost: true
		},
	})
	// #endif
</script>
<script setup lang="ts">
	import { defineEmits, onMounted, defineProps, withDefaults, watchEffect, nextTick } from 'vue';
	import { usePopup } from '@/hooks/popup';
	import { usePrivacyStore } from '@/stores';
	const privacyStore = usePrivacyStore();
	const props = withDefaults(defineProps<{ immediate ?: boolean }>(), {
		immediate: false
	});
	const [popupRef, { open, close }] = usePopup();
	const emit = defineEmits<{ agree : [button: string]; disagree : [button: string] }>();

	watchEffect(async () => {
		if (privacyStore.privacyModal.show) {
			open();
		} else {
			close();
		}
	});

	onMounted(() => {
		console.log('xxx', props.immediate && privacyStore.privacyModal.show);
		if (props.immediate || privacyStore.privacyModal.show) {
			privacyStore.show();
		}
	});
	function tapOpenPrivacyContract() {
		console.log('tapOpenPrivacyContract');
		wx.openPrivacyContract({
			success() {
				console.log('==== openPrivacyContract.success ====');
			},
			fail() {
				console.log('==== openPrivacyContract.fail ====');
			}
		});
	}
	function tapDisagreePricayAuthorization() {
		emit('disagree', 'disagree-button');
		privacyStore.disagree();
	}

	function tapAgreePricayAuthorization() {
		emit('agree', 'agree-button');
		privacyStore.agree();
	}
</script>

<style scope lang="scss">
	.privacy {
		width: 750rpx;
		border-radius: 32rpx 32rpx 0 0;
		padding: 32rpx 32rpx calc(32rpx + env(safe-area-inset-bottom)) 32rpx;
		background: #fff;

		&__title {
			font-size: 32rpx;
			font-weight: 600;
		}

		&__content {
			margin-top: 30rpx;
			text-indent: 60rpx;
			font-size: 28rpx;
			line-height: 40rpx;

			text {
				display: inline;
				color: $uni-primary;
			}
		}

		&__footer {
			margin-top: 50rpx;
		}

	}
</style>